<template>
	<view>
		<u-navbar title="检测记录" bgColor="#4a62e7" titleStyle="color:#fff" placeholder autoBack leftIconColor="#fff">
			<!-- <view class="u-nav-slot ftwt" slot="left">
				<u-icon name="arrow-left" color="#000" size="20" bold></u-icon>
			</view>
			<view class="u-nav-slot" slot="center">
				<view class="ftwt fts18">经营分析</view>
			</view> -->
		</u-navbar>
		<u-sticky bgColor="#4a62e7" :customNavHeight="44 + statusBarHeight">
			<view class="back_4a62e7 c-fff pad5-18">
				<view class='license-box mab20 mat10'>
					<view class="wid100 backFFF bor_radius30 padLR10 c-000">
						<newCarNumberTwo ref="carNumber" :value="queryForm.licenseNo" @input="(e)=>onChangeCarNumber(e)" @clearValue="clearValue" :placeholder="'输入车牌号码'" />
						<!-- <carNumber ref="carNumber" :value="queryForm.licenseNo" @input="(e)=>onChangeCarNumber(e)" /> -->
					</view>
					<u-button style="width: 60px;height:35px;color: #4a62e7;" class="mal-10" text="查询" color='#fff' @click="search()"></u-button>
				</view>
				<view class="displayAli_cen justify-spb mab8 fts15">
					<view class="displayAli_cen" @click="auditResultShow=true">
						<view class="mar-8">审核结果</view>
						<u-icon name="arrow-down" color="#fff"></u-icon>
					</view>
					<view class="displayAli_cen" @click="licenseTypeShow=true">
						<view class="mar-8">号牌种类</view>
						<u-icon name="arrow-down" color="#fff"></u-icon>
					</view>
					<view class="displayAli_cen" @click="testDateShow=true">
						<view class="mar-8">检测日期</view>
						<u-icon name="arrow-down" color="#fff"></u-icon>
					</view>
				</view>
				
				<!-- <view class="license-box mab8" @click="auditResultShow=true">
					<view class="title-box">人工审核结果：</view>
					<view class="displayAli_cen flex1 backFFF pad10">
						<u--input v-model="queryForm.auditResult" readonly inputAlign="left" placeholder="请选择"
							border="none"></u--input>
					</view>
				</view>
				<view class="license-box mab8" @click="licenseTypeShow=true">
					<view class="title-box">号牌种类：</view>
					<view class="displayAli_cen flex1 backFFF pad10">
						<u--input v-model="queryForm.licenseType" readonly inputAlign="left" placeholder="请选择"
							border="none"></u--input>
					</view>
				</view>
				<view class="license-box mab8">
					<view class="title-box">检测日期：</view>
					<view class="displayAli_cen backFFF pad10" @click="testDateShow=true">
						<u--input v-model="queryForm.testDate" readonly inputAlign="left" placeholder="请选择"
							border="none"></u--input>
					</view>
					<u-button class="flex1 mal-10" text="查询" color='#166ffc' @click="search()"></u-button>
				</view> -->
			</view>
		</u-sticky>

		<view class="pad10">
			<view class="pad15 backFFF mab8 bor_radius8 lineH1_8" v-for="(item,index) in recordList" :key="index" @click="goToDetail(item)">
				<view class="c-000 fts16 ftwt">{{item.license}}</view>
				<view class="c-919EAB fts14">车辆类型：{{item.licensecode}}</view>
				<view class="c-919EAB fts14">时间：{{item.testdate}}</view>
			</view>
		</view>
		<u-loading-icon v-if="loading"></u-loading-icon>
		
		<u-empty v-if="recordList.length==0" text='暂无数据' textColor='#000' marginTop='80'></u-empty>

		<!-- 审核结果 -->
		<AsiPicker :show="auditResultShow" title='审核结果' :list='auditResultList' label='itemLabel'
			@onConfirm="(e)=>onConfirmHandler(e,'auditResult','auditResultShow')" @onClose='auditResultShow=false'
			@scrolltolower='QDscrolltolower'></AsiPicker>
		<!-- 号牌种类 -->
		<AsiPicker :show="licenseTypeShow" title='号牌种类' :list='licenseTypeList' label='itemLabel'
			@onConfirm="(e)=>onConfirmHandler(e,'licenseType','licenseTypeShow')" @onClose='licenseTypeShow=false'
			@scrolltolower='QDscrolltolower'></AsiPicker>
		<!-- 检测日期 -->
		<u-datetime-picker :show="testDateShow" v-model="defaultDate" mode="date" closeOnClickOverlay
			@close="testDateShow=false" @cancel="testDateShow=false" @confirm='confirmTestDate'
			:minDate="631123200000"></u-datetime-picker>

	</view>
</template>

<script>
	import carNumber from '@/components/carNumber/index.vue'
	import newCarNumberTwo from '@/components/newCarNumberTwo/index.vue'
	import AsiPicker from '@/components/common/AsiPicker.vue'
	const {
		globalData: {
			statusBarHeight
		}
	} = getApp()
	export default {
		components: {
			carNumber,
			AsiPicker,
			newCarNumberTwo
		},
		data() {
			return {
				requestUrl:'http://'+uni.getStorageSync("IPNumber")+':'+uni.getStorageSync("portNumber") +'/vepts/api/v1/guiyang',
				statusBarHeight,
				queryForm: {
					licenseNo: '',
					auditResult: "",
					licenseType: '',
					testDate: '2020-08-04',
				},
				auditResultCode: "",
				licenseTypeCode: '',

				auditResultShow: false, // 审核结果选择
				auditResultList: [{
					itemValue: '',
					itemLabel: '所有'
				}, {
					itemValue: '0',
					itemLabel: '未审核'
				}, {
					itemValue: '1',
					itemLabel: '自动通过审核'
				}, {
					itemValue: '2',
					itemLabel: '人工通过审核'
				}, {
					itemValue: '3',
					itemLabel: '审核不通过'
				}], // 审核结果
				licenseTypeShow: false, // 号牌种类选择
				licenseTypeList: [{
					itemValue: '01',
					itemLabel: '大型汽车'
				}, {
					itemValue: '02',
					itemLabel: '小型汽车'
				}], // 号牌种类
				testDateShow: false, // 检测日期选择
				defaultDate: new Date().Format('YYYY-MM-DD'),

				recordList: [],
				page: 1,
				size: 20,
				loading:false,

			};
		},
		onLoad() {
			this.licenseTypeList = this.$staticData.licenseTypeList
			this.auditResultList = this.$staticData.auditResultList
			console.log('静态数据',this.$staticData);
			this.search() // 查询数据
		},
		onReachBottom() { // 触底刷新
			console.log("触底");
			this.page++
			this.getInspectionRecord(); //查询检测记录
		},
		methods: {
			clearValue() {
				this.queryForm.licenseNo = ''
				this.$refs.carNumber.focus = false
			},
			onChangeCarNumber(e) { // 监听车牌号输入
				let numberType = 'carNumber'
				let value = 'licenseNo'
				// 注释老键盘逻辑
				// if((e.length==7&&e.val.length>6) || (e.length==8&&e.val.length>7)){ // 键盘自动关闭
				if (e.length == 10 && e.val.length > 9) { // 键盘自动关闭
					if (this.queryForm[value].slice(-1) != e.val.slice(-1)) { // 最后一位不相等
						this.$refs[numberType].focus = false
					} else {
						this.$refs[numberType].focus = this.queryForm[value].length != e.val.length ? false : true
					}
				}
				this.queryForm[value] = e.val
			},
			// 检测日期
			confirmTestDate(e) {
				this.queryForm.testDate = new Date(e.value).Format('YYYY-MM-DD')
				// this.defaultDate = this.queryForm.testDate
				this.testDateShow = false
			},

			onConfirmHandler(e, property, show) { // 选择器确认选择
				console.log(e, property, show);
				// if(property=='auditResult'){ // 审核结果
				// 	this.auditResultCode = e.itemValue,
				// 	licenseTypeCode: '',
				// }
				if (!e) {
					this.$all.toast('请先选择选项')
					return
				}
				this.queryForm[property+'Code'] = e.itemValue
				this.queryForm[property] = e.itemLabel
				this[show] = false
			},
			QDscrolltolower(e) { // 监听下拉滚动触底
				console.log(e);
				// this.DYJpage++
				// this.getToBeTested() //查询待预检列表
			},

			// 跳转检测记录详情
			goToDetail(item) {
				uni.navigateTo({
					url: '/pages/inspectionRecord/detail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},

			// -------------------------- 接口请求
			search() { // 重新查询
				this.page = 1
				this.recordList = []
				this.getInspectionRecord(); //查询检测记录
			},
			getInspectionRecord() { // 点击查询
				this.loading=true
				let params = {
					"page": this.page,
					"size": this.size,
					"license": this.queryForm.licenseNo,
					"licensecode": this.queryForm.licenseTypeCode,
					"jcrq": this.queryForm.testDate,
					"tsno": uni.getStorageSync('tsno') || '',
					"shzt": this.queryForm.auditResultCode
				}
				this.$ajax.myRequest({
					url: this.requestUrl + '/vehinfoview',
					data: params,
					method: 'POST',
					success: (res) => {
						console.log(res);
						this.loading=false
						if (res.data.code == 200 && res.data.data) {
							let data=res.data.data
							if(data.length>0){
								this.recordList.push(...data)
							}else{
								this.recordList= this.page==1?[]:this.recordList
							}
						}else{
							this.$all.toast(res.data.msg)
						}
					},
				})
			},


		}

	}
</script>

<style lang="scss">
	.license-box {
		display: flex;
		align-items: center;

		.title-box {
			display: flex;
			align-items: center;
			font-size: 14px;
		}
	}
</style>